import { nextTick, onActivated, onDeactivated, onMounted, onUnmounted, ref } from 'vue'

import { getStyle } from '@/utils/dom'

import { debounce } from '../debounce'

const tableHeight = ref(130)
const _isInit = ref(true) // 为了防止onMounted 和 onActivated 一起执行
const _options = ref() // 记录传入的参数
/**
 * 计算表格的高度
 * @param options
 * root: 根元素
 * elements：要减去的子元素集合 必须为数组
 * otherFunc：函数返回的是其它需要减去的
 *
 */
interface IOptions {
  root?: string
  elements?: Array<string>
  otherFunc?: Function
}
const setTableHeight = (options?: IOptions) => {
  nextTick(() => {
    const defaultOptions = {
      root: 'body',
      elements: [
        '.header-title',
        '.order-tab',
        '.search-header-tab',
        '.common-search',
        '.page-block',
        '.container-fluid-tabs',
        '.column-setting',
      ],
      otherFunc: () => {
        // 10 search marginBottom
        // 20 tablewrap paddingTop
        //  20 appmain paddingBottom
        // const otherH =  10 + 20 + 20

        const appmainPaddingBottom = parseFloat(
          getStyle('.app-main .common-container')?.paddingBottom || 0
        )
        const contentWrapPaddingTop = parseFloat(
          getStyle('.app-main .common-container .content-wrap')?.paddingTop || 0
        )
        const searchBottom = parseFloat(getStyle('.common-search')?.marginBottom || 0)
        const headerwrapBottom = parseFloat(getStyle('.header-wrap')?.marginBottom || 0)
        const tablewrapPaddingTop = parseFloat(getStyle('.table-wrap')?.paddingTop || 0)
        const tablewrapPaddingtBottom = parseFloat(getStyle('.table-wrap')?.paddingBottom || 0)
        return (
          appmainPaddingBottom +
          contentWrapPaddingTop +
          searchBottom +
          headerwrapBottom +
          tablewrapPaddingTop +
          tablewrapPaddingtBottom
        )
      },
    }
    const mergeOptions = {
      ...defaultOptions,
      ...options,
    }
    _options.value = mergeOptions
    const { root, elements, otherFunc } = mergeOptions

    if (!Array.isArray(elements)) {
      throw Error('elements must be array')
    }

    const rootH = (document.querySelector(root) as HTMLElement)?.offsetHeight || 0
    let elementH = 0
    elements.forEach((ele) => {
      elementH += (document.querySelector(ele) as HTMLElement)?.offsetHeight || 0
    })
    const otherH = otherFunc()
    tableHeight.value = rootH - elementH - otherH
  })
}

// 辅助计算表格高度, 防止调用_resizeHandle报错
const _helperFunc = () => {
  return setTableHeight(_options.value)
}
const _resizeHandle = debounce(_helperFunc, 50)

export const useTable = (options?: IOptions) => {
  onMounted(() => {
    setTableHeight(options)
    window.addEventListener('resize', _resizeHandle)
  })

  onUnmounted(() => {
    window.removeEventListener('resize', _resizeHandle)
  })

  onActivated(() => {
    if (_isInit.value) {
      return
    }
    setTableHeight(options)
    window.addEventListener('resize', _resizeHandle)
  })

  onDeactivated(() => {
    window.removeEventListener('resize', _resizeHandle)
    _isInit.value = false
  })

  return {
    tableHeight,
    setTableHeight,
  }
}
